<script setup>
import {ref, watch} from "vue";
import UploadImage from "./UploadImage.vue"
import axios from "axios";

const prop = defineProps({is_open_insert_window: Number, isMobile: Boolean})
const insert_body = ref({})
const local_is_open_insert_window = ref(false)
const childUploadImage = ref()
const imageName = ref("initial_value")

const handleClose = () => {
}
const handle_image_name = (data) => {
  imageName.value = data
}
const insertConfirm = () => {
  childUploadImage.value.submitUpload()
}
watch(() => prop.is_open_insert_window, () => {
  local_is_open_insert_window.value = true
});
watch(imageName, (newValue, o) => {
  if (newValue !== "initial_value") {
    insert_body.value["cloth_id"] = newValue
    axios.post("/api/wardrobePlus/insert/", insert_body.value).then((resp) => {
      imageName.value = "initial_value"
      if (resp.data.code !== 0) {
        ElMessage.error(resp.data.message)
      } else {
        local_is_open_insert_window.value = false
        ElMessage.success(resp.data.message)
        insert_body.value = {}
        window.location.reload()
      }
    })
  }
});
</script>

<template>
  <el-dialog
      v-model="local_is_open_insert_window"
      title="又买新衣服了"
      :width="isMobile?'90%':'50%'"
      :before-close="handleClose"
      :show-close="false"
      draggable
  >
    <div style="display: flex">
      <el-row style="width: 100%">
        <el-col :span="12">
          <el-form
              label-position="top"
              label-width="100px"
              :model="insert_body"
              style="max-width: 460px"
          >
            <el-form-item label="这是谁的衣服">
              <el-input v-model="insert_body.user"/>
            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="品牌">
                    <el-input v-model="insert_body.cloth_brand"/>
                  </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                  <el-form-item label="价格">
                    <el-input v-model="insert_body.cloth_price"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="衣服类型">
                    <el-input v-model="insert_body.cloth_type"/>
                  </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                  <el-form-item label="颜色">
                    <el-input v-model="insert_body.cloth_color"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="季节">
                    <el-input v-model="insert_body.cloth_season"/>
                  </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                  <el-form-item label="尺码">
                    <el-input v-model="insert_body.cloth_size"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="购买时间">
              <el-date-picker v-model="insert_body.buy_time"/>
            </el-form-item>
            <el-form-item label="存放位置">
              <el-input v-model="insert_body.cloth_place"/>
            </el-form-item>
            <el-form-item label="对这件衣服进行描述">
              <el-input v-model="insert_body.describe"/>
            </el-form-item>

          </el-form>
        </el-col>
        <el-col :span="9" :offset="3">
          <span>图片上传</span>
          <UploadImage :isMobile="isMobile" @get_image_name="handle_image_name" ref="childUploadImage"></UploadImage>
        </el-col>
      </el-row>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="local_is_open_insert_window = false" style="background-color: #F2F1EF">取消</el-button>
        <el-button @click="insertConfirm" style="background-color: #413F3D;color: #F2F1EF">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>


